<template>
  <div>
    <div class="id">
      <div class="h">
        <p style="float:left;font-size: 23px;color: color: #333333;;">
          课程列表
        </p>
      </div>
      <div class="sort">
        <div class="sort1">
          <div
            style="
              position: absolute;
              float: left;
              margin-top: 20px;
              margin-left: 10px;
              color: #999999;
            "
          >
            课程类别
          </div>
          <a href="#" class="allcourse">一级分类</a>
          <router-link
            v-for="item in onetitle"
            @click.native="getOne"
            :key="item.id"
            :to="'course?' + 'one=' + item.id"
            exact
            class="allcourse"
            >{{ item.title }}</router-link
          >
        </div>
        <div class="sort2">
          <div class="children">
            <a href="#" class="allcourse">二级分类</a>
            <router-link
              exact
              v-for="two in twotitle"
              @click.native="getTwo"
              :key="two.id"
              :to="'course?' + 'two=' + two.id"
              class="allcourse"
              >{{ two.title }}</router-link
            >
          </div>
        </div>
        <div class="sort3">
          <div class="children3">
            <router-link @click.native="sortbuy()" exact to="course?sort=1"
              >销量</router-link
            ><router-link @click.native="sorttime()" exact to="course?sort=2"
              >最新</router-link
            ><router-link @click.native="sortprice()" exact to="course?sort=3"
              >价格</router-link
            >
          </div>
          <div style="float: right">
            <p style="font-size: 14px">1/1</p>
          </div>
        </div>
      </div>
      <div style="width: 1290px;
  height: 70px;
  margin-top: 20px;
  margin-bottom: 20px;
  border-bottom: solid #dcdcdc 1px;">
        <p style="float:left;font-size: 23px;color: color: #333333;;">
          课程展示
        </p>
      </div>
      <div class="course">
        <div class="courseintro" v-for="item in list" :key="item.id">
          <div class="test" style="overflow: hidden">
            <router-link :to="'/course/'+item.id"
              ><img
                style="height: 200px; width: 290px; transition: all 0.6s"
                :src="item.cover"
                alt=""
              />
              <p
                class="p"
                style="
                  position: absolute;
                  margin-top: -110px;
                  margin-left: 80px;
                "
              >
                &nbsp;&nbsp;&nbsp;点击学习&nbsp;&nbsp;&nbsp;
              </p></router-link
            >
            
          </div>
          <p
            style="
              color: #333333;
              font-size: 18px;
              margin-right: 180px;
              margin-top: 1px;
              float: left;
            "
          >
            <a class="coursea" href="">{{ item.title }}</a>
          </p> 
          <div style="clear: both;margin-top: 1px;float: left;font-size:11px;color: #999999;">{{item.viewCount}}人学习</div>
          <div style="clear: both;margin-top: -18px;float: right;background-color:#14BA4c;color:#FFFFFF;font-size:13px">&nbsp;&nbsp;免费&nbsp;&nbsp;</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import CourseApi from "@/api/course";
import SubjectApi from "@/api/subject";
export default {
  data() {
    return {
      id: "",
      list: {},
      onetitle: {},
      twotitle: {},
      course: {},
    };
  },
  created() {
    this.getCourse();
    this.getTitle();
  },
  methods: {
    //排序操作
    sortbuy() {
      //console.log(params)
      this.course.buyCount = "demo";
      this.getCourse();
      this.course.buyCount = ""; //数据清洗
    },
    sorttime() {
      //console.log(params)
      this.course.gmtModified = "demo";
      this.getCourse();
      this.course.gmtModified = ""; //数据清洗
    },
    sortprice() {
      //console.log(params)
      this.course.price = "demo";
      this.getCourse();
      this.course.price = ""; //数据清洗
    },
    getOne() {
      if (this.$route.query) {
        this.course.subjectParentId = ""; //清洗数据
        this.course.subjectId = this.$route.query.one; //获取id值
        this.getCourse(); //重新拉取数据
      }
    },
    getTwo() {
      if (this.$route.query) {
        this.course.subjectId = ""; //清洗数据
        this.course.subjectParentId = this.$route.query.two; //获取id值
        this.getCourse(); //重新拉取数据
      }
    },
    getCourse() {
      CourseApi.getAllCourse(this.course).then((res) => {
        this.list = res.data.items;
      });
    },
    getTitle() {
      SubjectApi.getOneTitle().then((res) => {
        this.onetitle = res.data.item;
      });
      SubjectApi.getTwoTotle().then((res) => {
        this.twotitle = res.data.item;
      });
    },
  },
};
</script >
<style scoped>
p{
  clear: both;
  
}
.footer{
  position:relative;
  background-color: red;
}
.allcourse {
  margin-top: 20px;
  float: left;
  margin-left: 30px;
  font-size: 14px;
}
a {
  color: #666666;
  text-decoration: none #666666;
}
.router-link-active {
  color: red;
  text-decoration: none #666666;
}
.allcourse:hover {
  color: #ea562e;
  text-decoration: none #ea562e;
}
.children {
  margin-left: 90px;
}
.sort3 {
  height: 40px;
  border-bottom: solid #dcdcdc 1px;
  overflow: hidden;
}
.sort3 .children3 {
  float: left;
  margin-left: 12px;
  margin-top: 10px;
}
.sort3 .children3 a {
  font-size: 14px;
  margin-left: 50px;
}
.sort3 .children3 .router-link-active {
  color: green;
  text-decoration: none #666666;
}
.sort2 {
  height: 120px;
  border-bottom: solid #dcdcdc 1px;
  overflow: hidden;
}
.sort1 {
  height: 60px;
  border-bottom: solid #dcdcdc 1px;
}
.sort {
  margin-top: -20px;
  width: 1246px;
}
.test:hover .p {
  opacity: 1;
}
.test:hover a img {
  filter: brightness(50%);
  transform: scale(1.2);
  opacity: 1;
}
.p {
  opacity: 0;
  font-size: 25px;
  border-radius: 15px;
  border: 1px solid white;
  color: white;
}
img:hover {
  filter: brightness(50%);
  transform: scale(1.2);
  opacity: 1;
}
.coursea:hover {
  color: black;
  text-decoration: underline black;
}
.courseintro {
  float: left;
  margin-right: 25px;
  margin-bottom: 50px;
}
.course {
  margin-left: 27px;
  width: 1300px;
}
.id {
  width: 1300px;
  margin-left: 100px;
}
.h {
  width: 1245px;
  height: 70px;
  margin-top: 20px;
  margin-bottom: 20px;
  border-bottom: solid #dcdcdc 1px;
}
.intro {
  height: 340px;
  width: 1000px;

  margin-top: 20px;
}
.avatar {
  height: 288px;
  width: 288px;
  background-color: white;
  margin-left: 20px;
  box-shadow: 8px 8px 8px #ccc;
}
.mess {
  position: absolute;
  margin-top: -287px;
  margin-left: 330px;
  height: 288px;
  width: 800px;
}
.level {
  position: absolute;
  margin-top: 40px;
  height: 39.2px;
  width: 128px;
  background-color: #ededed;
}
.content {
  position: absolute;
  margin-top: 80px;
  height: 210px;
  width: 800px;
  overflow: hidden;
}
</style>